<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function myClick(idStr, fun) {
            let btn = document.getElementById(idStr);
            btn.onclick = fun;
        }
        function allChecked(items, judge) {
            for (let i = 0; i < items.length; i++) {
                if (judge == 1) {    //1全选
                    items[i].checked = true;
                }
                else if (judge == 0) {  //0不选
                    items[i].checked = false;
                }
                else if (judge == 2) {  //2反选
                    items[i].checked = !items[i].checked;
                }
            }
        }
        function judgeFlag(items){
            let flag = 0;
            let count = 0;
            for (let i = 0; i < items.length; i++) {
                if (items[i].checked) {
                    count++;
                }
            }
            if (count == items.length)
                flag = 1;
            return flag;
        }
        window.onload = function () {
            let items = document.getElementsByName("items");
            let flag = 0;
            console.log(items.length);
            myClick("checkedAll", function () {
                allChecked(items, 1);
                flag = judgeFlag(items);
                if (flag == 1) {
                    check.checked = true;
                }
                else if (flag == 0) {
                    check.checked = false;
                }
            })
            myClick("checkedNot", function () {
                allChecked(items, 0);
                flag = judgeFlag(items);
                if (flag == 1) {
                    check.checked = true;
                }
                else if (flag == 0) {
                    check.checked = false;
                }
            })
            myClick("checkedRev", function () {
                allChecked(items, 2);
                flag = judgeFlag(items);
                if (flag == 1) {
                    check.checked = true;
                }
                else if (flag == 0) {
                    check.checked = false;
                }
            })
            myClick("check", function () {
                if (flag == 0) {
                    allChecked(items, 1);
                    flag = 1;
                }
                else if (flag == 1) {
                    allChecked(items, 0);
                    flag = 0;
                }
            })
            for (let i = 0; i < items.length; i++) {
                items[i].onclick = function(){
                    check.checked = true;
                    flag = 1;
                    for (let j = 0; j < items.length; j++) {
                        if (!items[j].checked) {
                            check.checked = false;
                            flag = 0;
                        }
                    }
                }
            }
            myClick("sendBtn", function(){
                let arr = [];
                for (let i = 0; i < items.length; i++) {
                    if (items[i].checked) {
                        arr.push(items[i].value);
                    }
                }
                alert("您喜欢" + arr);
            })
        }

    </script>
</head>

<body>
    <form method="post" action="">
        你喜欢什么运动？
        <input type="checkbox" name="" value="全选" id="check">全选
        <br>
        <input type="checkbox" name="items" value="足球">足球
        <input type="checkbox" name="items" value="篮球">篮球
        <input type="checkbox" name="items" value="羽毛球">羽毛球
        <input type="checkbox" name="items" value="乒乓球">乒乓球
        <br>
        <input type="button" value="全选" id="checkedAll">
        <input type="button" value="全不选" id="checkedNot">
        <input type="button" value="反 选" id="checkedRev">
        <input type="button" value="提 交" id="sendBtn">
    </form>
</body>

</html>